// projects template


.projects {
  width: ((365+20)*10-20)+px;
  height: 170px;

  padding:25px 0 20px;
  .h-scroll:first-child &{
    padding-top: 20px;
  }

  img.thumb {
    width: 260px;
    height: 170px;
  }

}


// project template

.project-thumbs {
  padding: 30px 0 15px;
  text-align: center;
  li {
   // padding-left: 10px;
  }
  li, img {
    display: inline-block;
  }
}

.project-info {
  position: absolute;
  margin-top: -30px;
  .field, button {
    float: left;
  }
  button.button {
    background: rgba(255, 255, 255, 1);
    height: 15px;
    text-transform: uppercase;
    margin: 0 0 0 5px;
    padding: 0 10px;
    line-height: 15px;
    position: relative;
    transition: .2s;
    font-size:.9em;
    font-family: $font-text;
    color:#999;
    display: block;
    top:0;
    cursor: pointer;
    &:hover {
      color:#000;
    }
  }
  .description {
    position: absolute;
    width: 360px;
    bottom: 25px;
    background: rgba(255, 255, 255, .85);
    padding: 20px;
    box-sizing: border-box;
    font-size: 10px;
    line-height: 12px;
    //
    left: 0;
    //
    visibility: hidden;
    opacity: 0;
    transition: .5s;
    //
    &.open {
      visibility: visible;
      opacity: 1;
    }
    .content {
      max-height: 400px;
      min-height: 250px;
      overflow:hidden;
      font-size:1.1em;
      line-height: 1.2777em;
    }
    //
    h1, h2 {
      display: block;
      text-transform: uppercase;
      font-family: $font-text-bold;
    }
    p {
      margin: 0 0 1.27777em 0;
    }
    .close {
      width: 100%;
      margin-top:10px;
      border-top: solid #999 1px;
      color: #999;
      line-height: 20px;
      position: relative;
      text-align: right;
      height: 30px;
      padding: 0 0 10px 0;
      font-family:$font-text;
      font-size:.9em;
      text-transform: uppercase;
      line-height: 20px;
      cursor: pointer;
      bottom: 0;
      transition:.3s;
      &:hover {
        color: #000;
      }
    }
  }
}